import React, { useEffect, useState } from 'react'
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs'
import { EditorState, convertToRaw, ContentState } from 'draft-js';
function NewsEditor(props) {
    const [editorState,seteditorState] =useState('')
    useEffect(()=>{
        const html =props.content
        if (html===undefined) return
        console.log(props.content);
        const contentBlock =htmlToDraft(html)
        if (contentBlock){
            const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
            const editorState = EditorState.createWithContent(contentState);
            seteditorState(editorState)
        }

    },[props.content])
    return (
        <div>
            <Editor
                editorState={editorState}
                toolbarClassName="toolbarClassName"
                wrapperClassName="wrapperClassName"
                editorClassName="editorClassName"
                onEditorStateChange={(editorState)=>seteditorState(editorState)}
                onBlur={()=>{
                    const content=draftToHtml(convertToRaw(editorState.getCurrentContent()))
                    props.getContent(content)
                }}
            />;
        </div>
    )
}

export default NewsEditor
